import { Router, Route, Switch } from 'dva/router';
import ErrorPage from "../../routes/404/index"
import { TabBar, Menu, ActivityIndicator, NavBar } from 'antd-mobile';
import mainClass from './index.less'
import { routerAggregate } from '../../permission/config'
import AggreModule from '../../permission/permission'
import React, { PureComponent } from 'react';
// import { Modal, List, InputItem, WhiteSpace, Button, WingBlank } from 'antd-mobile';
import { connect } from 'dva';
import menusTitle from '../../menuTab'
class Main extends PureComponent {
    constructor(props, context) {
        super(props, context)
        this.state = {
            show: false,
            selectedTab: "index"
        }
    }
    // methods
    handleClick() {
        this.setState({
            show: !this.state.show,
        });
    }
    onMaskClick = () => {
        this.setState({
            show: false,
        });
    }
    render() {
        const { history, app, loading } = this.props;
        return (
            <div>
                <div hidden={this.props.hidden} className={this.state.show ? 'menu-active' : ''}>
                    <div className={mainClass.header}>
                        <NavBar
                            leftContent="菜单"
                            icon={<img src="https://gw.alipayobjects.com/zos/rmsportal/iXVHARNNlmdCGnwWxQPH.svg" className="am-icon am-icon-md" alt="" />}
                            mode="dark"
                            onLeftClick={this.handleClick.bind(this)}
                            className={mainClass.navBar}>
                            {menusTitle[this.props.now.pathname]}
                        </NavBar>
                        <div className={this.state.show && this.props.appNav != 0 ? mainClass.show : mainClass.hide}>
                            {JSON.parse(localStorage.getItem("menu")) == undefined ?
                                null :
                                <Menu
                                    onChange={s => {
                                        let index = s[1].split("_"),
                                            menu = JSON.parse(localStorage.getItem("menu"));
                                        this.props.dispatch({ type: 'auth/redirect', payload: { url: menu[index[0]].children[index[1]].children[index[2]].mobileUrl } })
                                        this.setState({ show: false });
                                    }}
                                    data={(JSON.parse(localStorage.getItem("menu")).find(s => s.rel == this.props.appNav)).children == '' ? [] : (JSON.parse(localStorage.getItem("menu")).find(s => s.rel == this.props.appNav)).children}
                                    value={['1', '3']}
                                    height={document.documentElement.clientHeight * 0.6} />}
                        </div>
                    </div>
                    <div hidden={!this.state.show} className={mainClass.menu_mask} onClick={this.onMaskClick} />
                </div>
                <div className="router" hidden={this.props.hidden} style={{ height: '45px' }} >
                </div>
                <Router history={history}>
                    <Switch>
                        <AggreModule config={routerAggregate} app={app} dispatch={this.props.dispatch} />
                        <Route path="/404" component={ErrorPage}></Route>
                    </Switch>
                </Router>
                <div className="router" hidden={this.props.hidden} style={{ height: '50px' }} ></div>
                <div className={mainClass.tabBat}>
                    <TabBar
                        unselectedTintColor="#949494"
                        tintColor="#33A3F4"
                        barTintColor="white"
                        hidden={this.props.hidden}>
                        {
                            this.props.where.length == 0 && JSON.parse(localStorage.getItem("menu")) != undefined ?
                                JSON.parse(localStorage.getItem("menu")).map((s, key) => {
                                    return <TabBar.Item
                                        key={key}
                                        icon={
                                            (
                                                <div>
                                                    <i className={s.icon}></i>
                                                </div>
                                            )
                                        }
                                        selectedIcon={
                                            (
                                                <div>
                                                    <i className={s.selectedIcon} style={{ color: '#55bbff' }}></i>
                                                </div>
                                            )
                                        }
                                        title={s.title}
                                        selected={this.state.selectedTab === s.selected}
                                        onPress={() => {
                                            this.props.dispatch({ type: 'auth/redirect', payload: { url: s.onPress.url } })
                                            this.props.dispatch({ type: 'auth/updataAppNav', payload: s.rel })
                                            this.setState({
                                                selectedTab: s.onPress.active,
                                            });
                                        }}>
                                    </TabBar.Item>
                                }) : this.props.where.map((s,key) => {
                                    return <TabBar.Item
                                        key={key}
                                        icon={
                                            (
                                                <div>
                                                    <i className={s.icon}></i>
                                                </div>
                                            )
                                        }
                                        selectedIcon={
                                            (
                                                <div>
                                                    <i className={s.selectedIcon} style={{ color: '#55bbff' }}></i>
                                                </div>
                                            )
                                        }
                                        title={s.title}
                                        selected={this.state.selectedTab === s.selected}
                                        onPress={() => {
                                            this.props.dispatch({ type: 'auth/redirect', payload: { url: s.onPress.url } })
                                            this.props.dispatch({ type: 'auth/updataAppNav', payload: s.rel })
                                            this.setState({
                                                selectedTab: s.onPress.active,
                                            });
                                        }}>
                                    </TabBar.Item>
                                })
                        }
                    </TabBar>
                </div>
            </div>
        );
    }
}
function mapStateToProps(state) {
    return {
        hidden: state.auth.locationWhere.hidden,
        menu: state.auth.menu,
        where: state.auth.where,
        now: state.auth.now,
        appNav: state.auth.appNav
    }
}
export default connect(mapStateToProps)(Main);
